﻿<style>
    td {
        width: 40px;
        height: 42px;
        text-align: center;
        border: 1px solid black;
    }
    table.draggable {
        cursor: pointer;
        z-index: 1;
        background-color: cornsilk;
    }
</style>

<script>
    $(document).ready(function () {
        $("table.draggable").draggable({
            revert: "invalid",
            snap: '.gridlines',
            snapMode: "outer"
        });
    });
</script>

<div class="row">
    <div class="col-md-3">Battleship</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>  
</div>

<br/>

<div class="row">
    <div class="col-md-3">Destroyer</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Destroyer</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Cruiser</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Cruiser</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Cruiser</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Submarine</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Submarine</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Submarine</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-3">Submarine</div>
    <div>
        <table class="table-hover draggable">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>
  